<template>

  <div style="display: flex;">
    <!-- 分组 -->
    <div class="frame-group" v-if="groupShow">
      <div class="flexal" style="margin-top: 15px;margin-left: 12px;margin-bottom: 10px;">
        <img :src="require('@/assets/img/message/message.png')"  class="imgIcon" @click="groupShow = !groupShow" />
      </div>
      <div class="frame-group-item flexal" v-for="(item,index) in tabList" :key="index" :class="tabListIndex ==  index? 'frame-group-item-active':''" @click="tabListIndex = index">
        <img :src="tabListIndex ==  index? item.chooseIcon:item.icon"  class="imgIcon"  style="margin-left: 12px;" />
        <div class="text">{{item.text}}</div>
      </div>
    </div>
     <!-- 消息 -->
     <div class="farme-people">
      <!-- 标题 -->
      <div class="flexal" style="margin-top: 15px;margin-left: 14px;margin-bottom: 10px;">
        <img :src="require('@/assets/img/message/message.png')"  class="imgIcon" @click="groupShow = !groupShow" v-if="!groupShow" />
        <div class="people-title">消息</div>
      </div>
      <div  class="frame-people-item" v-infinite-scroll="scrollLoad">
      <div class="people-item flexal" :class="listIndex ==  index? 'people-item-active':''"  v-for="(item,index) in list" :key="index" @click="submit(index)">
        <!-- 头像 -->
         <div style="display: flex;">
          <!-- 群九宫格头像 -->
          <!-- <div class="avatar" v-if="item.avatarList.length !=0">
           <img v-for="(items,indexs) in item.avatarList" :src="items" :class="computedAvatar(item.avatarList)" :key="indexs"  />
          </div> -->
          <img :src="item.avatar"  class="imgIcon-avatar"/>
          
          <div class="people-bubble flexcen" v-if="item.count>0" :class=" item.count >=10?'people-bubble-both':''">{{item.count}}</div>
        </div>
        <!-- 名称+内容 -->
        <div style="margin-left: 12px;flex: 1;">
          <!-- <div class="flexal"> -->
            <div class="people-text flexal">
              {{item.name}}
              <img :src="require('@/assets/img/message/start.png')" v-if="item.start"  style="width: 16px;height: 16px;margin-left: 7px;"/>
            </div>
            
          <!-- </div> -->
            <div class="people-content"><span class="people-content" v-if="item.call" style="color: #D54941;">@我</span> {{item.content}} </div>
        </div>
        <!-- 时间+图标 -->
        <div style="text-align: right;margin-right: 14px;">
          <div style="display: flex;">
          <div class="people-time">{{item.time}}</div>
          <div class="triangle" v-if="item.top"></div>
          </div>
          <img v-if="item.shield" :src="require('@/assets/img/message/shield.png')"  style="width: 13px;height: 16px;margin-top: 4px;" />
          <div v-else style="width: 13px;height: 16px;margin-top: 4px;" ></div>
        </div>
      </div>
    </div>
    </div>
  </div>
  </template>
  
  <script>
  export default {
    name: 'notice',
    props: {
      msg: String
    },
    data(){
    return{
        tabList:[
          {
            icon:require('@/assets/img/message/message1.png'),
            chooseIcon:require('@/assets/img/message/messageIcon.png'),
            text:'全部消息'
          },
          // {
          //   icon:require('@/assets/img/message/no.png'),
          //   chooseIcon:require('@/assets/img/message/noIcon.png'),
          //   text:'未读'
          // },{
          //   icon:require('@/assets/img/message/@me.png'),
          //   chooseIcon:require('@/assets/img/message/@meIcon.png'),
          //   text:'@我'
          // },
          {
            icon:require('@/assets/img/message/single.png'),
            chooseIcon:require('@/assets/img/message/singleIcon.png'),
            text:'单聊'
          },{
            icon:require('@/assets/img/message/group.png'),
            chooseIcon:require('@/assets/img/message/groupIcon.png'),
            text:'群组'
          },{
            icon:require('@/assets/img/message/review.png'),
            chooseIcon:require('@/assets/img/message/reviewIcon.png'),
            text:'审批'
          },{
            icon:require('@/assets/img/message/notice1.png'),
            chooseIcon:require('@/assets/img/message/noticeIcon.png'),
            text:'公告'
          },{
            icon:require('@/assets/img/message/robot1.png'),
            chooseIcon:require('@/assets/img/message/robotIcon.png'),
            text:'机器人'
          },{
            icon:require('@/assets/img/message/bell.png'),
            chooseIcon:require('@/assets/img/message/bellIcon.png'),
            text:'通知集成'
          },
        ],
        // type:0:单聊,1:群聊,2:审批,3:公告,4:文件传输助手,5:机器人
        list:[
        {
          name:'群聊名称名称名称',
          content:'文字内容内容内容文字内容内容内容文字内容内容内容文字内容内容内容',
          avatar:require('@/assets/img/messageRight/group.png'),
          time:'14:30',
          shield:false,
          count:99,
          top:1,
          avatarList:['https://cdn.uviewui.com/uview/swiper/1.jpg','https://cdn.uviewui.com/uview/swiper/2.jpg',
          'https://cdn.uviewui.com/uview/album/1.jpg',
          'https://cdn.uviewui.com/uview/album/2.jpg',
          'https://cdn.uviewui.com/uview/album/3.jpg',
          // 'https://cdn.uviewui.com/uview/album/4.jpg',
          // 'https://cdn.uviewui.com/uview/album/5.jpg',
          // 'https://cdn.uviewui.com/uview/album/6.jpg',
          // 'https://cdn.uviewui.com/uview/album/7.jpg',
          // 'https://cdn.uviewui.com/uview/album/8.jpg',
          ],
          type:1,
          call:0,
          start:0
        },
        {
          name:'姓名',
          content:'文字内容内容内容文字内容内容内容文字内容内容内容文字内容内容内容',
          avatar:'https://cdn.uviewui.com/uview/swiper/2.jpg',
          time:'14:30',
          shield:true,
          count:1,
          top:0,
          avatarList:[],
          type:0,
          call:1,
          start:1
        },
        {
          name:'姓名',
          content:'文字内容内容内容文字内容内容内容文字内容内容内容文字内容内容内容',
          avatar:'https://cdn.uviewui.com/uview/swiper/3.jpg',
          time:'14:30',
          shield:false,
          count:1,
          top:0,
          avatarList:[],
          type:0,
          call:0,
          start:0
        },
        {
          name:'审批',
          content:'文字内容内容内容',
          avatar:require('@/assets/img/message/examine.png'),
          time:'8月4日',
          shield:false,
          count:0,
          top:0,
          avatarList:[],
          type:2,
          call:0,
          start:0
        },
        {
          name:'公告',
          content:'文字内容内容内容文字内容内容内容',
          avatar:require('@/assets/img/message/notice.png'),
          time:'8月3日',
          shield:false,
          count:0,
          top:0,
          avatarList:[],
          type:3,
          call:0,
          start:0
        },
        {
          name:'文件传输助手',
          content:'文字内容内容内容',
          avatar:require('@/assets/img/message/aide.png'),
          time:'8月2日',
          shield:false,
          count:0,
          top:0,
          avatarList:[],
          type:4,
          call:0,
          start:0
        },
        {
          name:'机器人',
          content:'文字内容内容内容文字内容内容内容文字内容内容内容文字内容内容内容',
          avatar:require('@/assets/img/message/robot.png'),
          time:'8月1日',
          shield:false,
          count:0,
          top:0,
          avatarList:[],
          type:5,
          call:0,
          start:0
        },
        {
          name:'通知集成',
          content:'文字内容内容内容文字内容内容内容文字内容内容内容文字内容内容内容',
          avatar:require('@/assets/img/message/bell1.png'),
          time:'8月1日',
          shield:false,
          count:0,
          top:0,
          avatarList:[],
          type:6,
          call:0,
          start:0
        },
        {
          name:'姓名',
          content:'文字内容内容内容文字内容内容内容文字内容内容内容文字内容内容内容',
          avatar:'https://cdn.uviewui.com/uview/swiper/2.jpg',
          time:'14:30',
          shield:false,
          count:1,
          top:0,
          avatarList:[],
          type:0,
          call:0,
          start:0
        },
        {
          name:'姓名',
          content:'文字内容内容内容文字内容内容内容文字内容内容内容文字内容内容内容',
          avatar:'https://cdn.uviewui.com/uview/swiper/3.jpg',
          time:'14:30',
          shield:false,
          count:1,
          top:0,
          avatarList:[],
          type:0,
          call:0,
          start:0
        },
        {
          name:'姓名',
          content:'文字内容内容内容文字内容内容内容文字内容内容内容文字内容内容内容',
          avatar:'https://cdn.uviewui.com/uview/swiper/2.jpg',
          time:'14:30',
          shield:false,
          count:1,
          top:0,
          avatarList:[],
          type:0,
          call:0,
          start:0
        },
        {
          name:'姓名',
          content:'文字内容内容内容文字内容内容内容文字内容内容内容文字内容内容内容',
          avatar:'https://cdn.uviewui.com/uview/swiper/1.jpg',
          time:'14:30',
          shield:false,
          count:1,
          top:0,
          avatarList:[],
          type:0,
          call:0,
          start:0
        },
        {
          name:'姓名',
          content:'文字内容内容内容文字内容内容内容文字内容内容内容文字内容内容内容',
          avatar:'https://cdn.uviewui.com/uview/swiper/3.jpg',
          time:'14:30',
          shield:false,
          count:1,
          top:0,
          avatarList:[],
          type:0,
          call:0,
          start:0
        },
      ],
      listIndex:null,
      tabListIndex:0,
      groupShow:false,
    }
    },

    methods:{
      // 滑底触发
      scrollLoad(){
        console.log('滑底触发')
      },
      // 消息通知回调
      submit(index){
        this.listIndex = index
        this.$emit('noticeSubmit',this.list[this.listIndex])
      }
    } 
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped lang="less">
    .farme-people{
    margin-top: 31px;
    width: 488px;
    height: 851px;
    background: #FFFFFF;  
    border-radius: 16px 16px 16px 16px;

    .people-title{
      margin-left: 12px;
      font-size: 19px;
      font-weight: 500;
      color: #333333;
    }

    .frame-people-item{
      height: 790px;
      -webkit-overflow-scrolling: touch;
      overflow-scrolling: touch;
      overflow-y: auto;
      overflow-x: hidden;
    }
    .people-item-active{
      background: #F2F3FF;
    }
    .people-item{
      margin-top: 2px;
      margin-left: 12px;
      width: 464px;
      height: 76px;
      // background: #F2F3FF;
      border-radius: 16px 16px 16px 16px;

      .imgIcon-avatar{
        width: 52px;
        height: 52px;
        border-radius: 50%;
        margin-left: 12px;
      }
      .people-text{
        width: 318px;
        font-weight: 500;
        font-size: 16px;
        color: #333333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: 5px;
      }
      .people-content{
        width: 318px;
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: 5px;
      }
      .people-time{
        font-weight: 400;
        font-size: 14px;
        color: #9D9D9D;
      }
      .people-bubble{
        margin-left: -12px;
        // position: absolute;
        width: 16px;
        height: 16px;
        background: #F65160;
        font-weight: 400;
        font-size: 9px;
        color: #FFFFFF;
        border-radius: 50%;
      }
      .people-bubble-both{
        width: 18px;
        height: 18px;
      }
      .triangle {
        margin-right: -5px;
        // right: 100px;
        // margin-left: 452px;
        // margin-top: -40px;
        // position: absolute;
        width: 0;
        height: 0;
        border-top: 6px solid #366EF4;
        border-left: 6px solid transparent;
    }

    }
  }
  
::-webkit-scrollbar {
    width: 6px; /*对垂直流动条有效*/
    height: 6px; /*对水平流动条有效*/
}
      .avatar {
          width: 52px;
          height: 52px;
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center;
          align-content: center;
          flex-wrap: wrap-reverse;
          border: 2px solid #36A8F4;
          border-radius: 50%;
          margin-left: 12px;
          // border: #000 1px solid;
          // margin: 30px;
     

      .avatarImg {
          width: 52px;
          height: 52px;
      }

      .avatarItem--1 {
          width: 98%;
          height: 98%;
      }

      .avatarItem--2 {
          width: 47%;
          height: 47%;
          margin: 1%;
      }

      .avatarItem--3 {
          width: 32%;
          height: 30%;
          margin: 1%;
      }
    }
    .frame-group{
      width: 132px;
      height: 851px;
      background: #FFFFFF;
      border-radius: 16px 16px 16px 16px;
      margin-top: 31px;
      margin-right: 12px;

      .frame-group-item{
        margin-top: 6px;
        margin-left: 12px;
        width: 108px;
        height: 35px;
        // background: #F2F3FF;
        border-radius: 8px;
        color: #858A99;
      }
      .text{
        margin-left: 6px;
        font-weight: 400;
        font-size: 14px;
       
      }
      .frame-group-item-active{
        background: #EFF2FF;
        color: #0052D9;
      }
    }
    .imgIcon{
      width: 19px;
      height: 19px;
    }
    .imgIcons{
      width: 16px;
      height: 16px;
    }
  </style>
  